// ReactDOM.render(
//  <div>
//  <h1>菜鸟教程</h1>
//  <h2>欢迎学习 React</h2>
//  <p data-myattribute = "somevalue">这是一个很不错的 JavaScript 库!</p>
//  </div>
//  ,
//  document.getElementById('example')
//);
//data-myattribute自定义属性data-前缀


//JSX 中使用 JavaScript 表达式。表达式写在花括号 {} 中
// ReactDOM.render(
//	<h1>{1+2}</h1>,
//	document.getElementById('example')
// );


//在 JSX 中不能使用 if else 语句，但可以使用 conditional (三元运算) 表达式来替代。
//以下实例中如果变量 i 等于 1 浏览器将输出 true, 如果修改 i 的值，则会输出 false.
// var i=1;
// ReactDOM.render(
//	<h1>{i==1?'true':'false'}</h1>,
//	document.getElementById('example')
// );
 
//样式
// React 推荐使用内联样式。我们可以使用 camelCase 语法来设置内联样式. 
// React 会在指定元素数字后自动添加 px 。以下实例演示了为 h1 元素添加 myStyle 内联样式：
//var myStyle = {
//  fontSize: 100,
//  color: '#FF0000'
//};
//ReactDOM.render(
//  <h1 style = {myStyle}>菜鸟教程</h1>,
//  document.getElementById('example')
//);


//注释需要写在花括号中，实例如下：
//ReactDOM.render(
//  <div>
//  <h1>菜鸟教程</h1>
//  {/*注释...*/}
//   </div>,
//  document.getElementById('example')
//);
//1、在标签内部的注释需要花括号
//2、在标签外的的注释不能使用花括号
//ReactDOM.render(
//  /*注释 */
//  <h1>孙朝阳 {/*注释*/}</h1>,
//  document.getElementById('example')
//);


//数组  JSX 允许在模板中插入数组，数组会自动展开所有成员：
//var arr = [
//<h1>菜鸟教程</h1>,
//<h2>学的不仅是技术，更是梦想！</h2>,
//];
//ReactDOM.render(
//<div>{arr}</div>,
//document.getElementById('example')
//);

//HTML 标签 vs. React 组件
//React 可以渲染 HTML 标签 (strings) 或 React 组件 (classes)。
//
//要渲染 HTML 标签，只需在 JSX 里使用小写字母的标签名。
//var myDivElement = <div className="foo" />;
//ReactDOM.render(myDivElement, document.getElementById('example'));

//要渲染 React 组件，只需创建一个大写字母开头的本地变量。
//var MyComponent = React.createClass({/*...*/});
//var myElement = <MyComponent someProperty={true} />;
//ReactDOM.render(myElement, document.getElementById('example'));
//React 的 JSX 使用大、小写的约定来区分本地组件的类和 HTML 标签。
//
//注意:
//由于 JSX 就是 JavaScript，一些标识符像 class 和 for 不建议作为 XML 属性名。作为替代，React DOM 使用 className 和 htmlFor 来做对应的属性。
